【CSS】list-style-position - リストスタイルの位置

CSSのlist-style-positionプロパティについて解説します。

検証環境

CSS

macOS

14.1

list-style-position

list-style-positionは“リストスタイルの位置”のプロパティです。

リストスタイルの実態である擬似要素markerの位置をこのプロパティによって定義できます。

基本構文

list-style-position: 値;

値

代表的な値は次の通りです。

値	意味
inside	li要素の境界線の内側
outside	li要素の境界線の外側

サンプル

inside

sample.html

<style>
ul {
    ___ih_hl_start
    list-style-position: inside;
    ___ih_hl_end
}
li {
    border: 1px solid red;
}
</style>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

プレビュー

outside

sample.html

<style>
ul {
    ___ih_hl_start
    list-style-position: outside;
    ___ih_hl_end
}
li {
    border: 1px solid red;
}
</style>

<ul>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>

プレビュー